/**
* Created by wl
* 项目管理>持有中-详情页-项目详情-关键协议编辑信息
*/
<template>
    <div>
        <div  :class="{'ca-box': $route.name.includes('add'), 'ca-m-t-28':  $route.name.includes('add'), 'ca-p-20': $route.name.includes('add')}">
            <div class="ca-title">
                <h3>关键协议</h3>
                <div class="el-right" v-show="showBtn">
                    <el-button type="primary" @click="save" size="small">保存</el-button>
                    <el-button @click="close" size="small">取消</el-button>
                </div>
            </div>
            <div class='content_bx'>
                <span>投资风险</span>
                <p>
                    <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="itemHoldTextEntity[0].text"
                    :maxlength="3000"
                    >
                    </el-input>
                </p>
            </div>
            <div class='content_bx'>
                <span>投资亮点</span>
                <p>
                    <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="itemHoldTextEntity[1].text"
                    :maxlength="3000">
                    </el-input>
                </p>
            </div>
            <div class='content_bx'>
                <span>对赌协议</span>
                <div class="wid-100">
                    <div v-for="(item, index) in gambling" :key="index">
                        <p>
                        <el-row>
                            <el-col :span="6">
                                <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="item.protocolTime">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="15" :offset="1">
                                <el-input
                                type="text"
                                placeholder="请输入内容"
                                v-model="item.protocolNote" :maxlength="300">
                                </el-input>
                            </el-col>
                            <el-col :span="2">
                                <button @click="addAgreement('gambling')" type="button" class="ca-btn ca-btn-round ca-m-l-10" v-if="index==0"><i class="fa fa-plus"></i></button>
                                <button @click="delAgreement('gambling', index)" type="button" class="ca-btn ca-btn-round ca-m-l-10" v-if="index!=0"><i class="fa fa-times"></i></button>
                            </el-col>
                        </el-row>
                        </p>
                    </div>
                </div>    
            </div>
            <div class='content_bx'>
                <span>回购协议</span>
                <div class="wid-100">
                     <div v-for="(item, index) in buyBack" :key="index">
                        <p>
                        <el-row class="ca-b-10">
                            <el-col :span="6">
                                <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="item.protocolTime">
                                </el-date-picker>
                            </el-col>
                            <el-col :span="15" :offset="1">
                                <el-input
                                type="text"
                                placeholder="请输入内容"
                                v-model="item.protocolNote"
                                :maxlength="300">
                                </el-input>
                            </el-col>
                            <el-col :span="2">
                                <button @click="addAgreement('buyBack')" type="button" class="ca-btn ca-btn-round ca-m-l-10" v-if="index==0"><i class="fa fa-plus"></i></button>
                                <button @click="delAgreement('buyBack', index)" type="button" class="ca-btn ca-btn-round ca-m-l-10" v-if="index!=0"><i class="fa fa-times"></i></button>
                            </el-col>
                        </el-row>
                        </p>
                    </div>
                </div>
            </div>
            <div class='content_bx'>
                <span>限售条件</span>
                <p>
                    <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="itemHoldTextEntity[2].text"
                    :maxlength="3000">
                    </el-input>
                </p>
            </div>
            <div class='content_bx'>
                <span>IPO及转持备注</span>
                <p>
                    <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="itemHoldTextEntity[3].text"
                    :maxlength="3000">
                    </el-input>
                </p>
            </div>
            <div class='content_bx'>
                <span>其他</span>
                <p>
                    <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="itemHoldTextEntity[4].text"
                    :maxlength="3000">
                    </el-input>
                </p>
            </div>
        </div>
        <div class="ca-box ca-m-t-28 ca-p-20">
            <csBettingBuyBack :gambling="gambling" :buyBack="buyBack"></csBettingBuyBack>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                itemHoldProtocolEntitys: [], //对赌回购
                itemHoldTextEntity: [
                    { //持有中 - 关键协议 - 投资风险
                        'text': '',
                        'textType': this.$store.state.user.dictionaryMap.protocolTextType[0].id
                    },
                    { //持有中 - 关键协议 - 投资亮点
                        'text': '',
                        'textType': this.$store.state.user.dictionaryMap.protocolTextType[1].id
                    },
                    { //持有中 - 关键协议 - 限售条件
                        'text': '',
                        'textType': this.$store.state.user.dictionaryMap.protocolTextType[2].id
                    },
                    { //持有中 - 关键协议 - ipo及转持备注
                        'text': '',
                        'textType': this.$store.state.user.dictionaryMap.protocolTextType[3].id
                    },
                    { //持有中 - 关键协议 - 其他
                        'text': '',
                        'textType': this.$store.state.user.dictionaryMap.protocolTextType[4].id
                    },
                ], //非对赌回购
                info: {
                    disposalMethods: null, //处置方式
                    id: null, //id
                    isTrigger: 0, //是否触发 1:是 0:否
                    itemId: null,  //项目ID
                    protocolNote: '', //协议内容
                    protocolTime: '', //协议时间
                    protocolType: 1, //协议类型 1:对赌协议 2:回购协议
                    triggerNote: '', //触发内容
                    triggerTime: new Date() //触发时间
                },
                gambling: [], //对赌
                buyBack: [], //回购
            }
        },
        watch: {
            //深度 watcher
            gambling: {
                handler: function (val) {
                    this.itemHoldProtocolEntitys = [...val, ...this.buyBack]
                },
                deep: true
            },
            buyBack: {
                handler: function (val) {
                    this.itemHoldProtocolEntitys = [...this.gambling, ...val]
                },
                deep: true
            },
            itemHoldProtocolEntitys: { //对赌协议部分
                handler: function (val) {
                    this.$emit('protocolInfo', val)
                },
                deep: true
            },
            itemHoldTextEntity: { //非对赌协议部分
                handler: function (val) {
                    this.$emit('textInfo', val)
                },
                deep: true
            }
        },
        props: {
            showBtn: {
                type: Boolean,
                default: function () {
                    return false;
                }
            },
        },
        mounted() {
            if (this.$route.params.itemId !== '-1') {
                this.getInfo()
            } else {
                this.init()
            }
        },
        methods: {
            init() { //新建时
                this.gambling.push(Object.assign({}, this.info));
                this.buyBack.push(Object.assign({}, this.info));
                this.buyBack[0].protocolType = 2;
                this.itemHoldProtocolEntitys = [...this.gambling, ...this.buyBack]
            },
            save() {
                let query = {
                    itemHoldProtocolEntitys: this.itemHoldProtocolEntitys,
                    itemHoldTextEntity: this.itemHoldTextEntity,
                    itemId: this.$route.params.itemId,
                }
                apiHttp(api.EDIT_PROTOCOL, query).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.$emit('save')
                        this.$message({
                            message: '修改成功！',
                            type: 'success',
                            center: true
                        });
                    }
                })
            },
            close() {
                this.$emit('close')
                this.$emit('showBettingTrue')
            },
            // 获取对赌协议
            getInfo() {
                apiHttp(api.CHECK_PROTOCOL, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.gambling = []
                        this.buyBack = []
                        ret.data.itemHoldProtocolEntitys.map(item => {
                            if (item.protocolType === 1) { //对赌
                                this.gambling.push(item)
                            } else if (item.protocolType === 2) { //回购
                                this.buyBack.push(item)
                            }
                        })
                        // 非对赌回购
                        if (ret.data.itemHoldTextEntity.length > 0) {
                            ret.data.itemHoldTextEntity.map((item) => {
                                this.itemHoldTextEntity.map((val,ind) => {
                                    if (item.textType === val.textType) {
                                        this.itemHoldTextEntity[ind].text = item.text
                                        this.itemHoldTextEntity[ind].textType = item.textType
                                    }
                                })
                            })
                        }
                        if (this.buyBack.length <= 0) {
                            this.buyBack = [{
                                disposalMethods: null, //处置方式
                                id: null, //id
                                isTrigger: 0, //是否触发 1:是 0:否
                                itemId: null,  //项目ID
                                protocolNote: '', //协议内容
                                protocolTime: '', //协议时间
                                protocolType: 2, //协议类型 1:对赌协议 2:回购协议
                                triggerNote: '', //触发内容
                                triggerTime: new Date() //触发时间
                            }]
                        }
                        if (this.gambling.length <= 0) {
                            this.gambling = [{
                                disposalMethods: null, //处置方式
                                id: null, //id
                                isTrigger: 0, //是否触发 1:是 0:否
                                itemId: null,  //项目ID
                                protocolNote: '', //协议内容
                                protocolTime: '', //协议时间
                                protocolType: 1, //协议类型 1:对赌协议 2:回购协议
                                triggerNote: '', //触发内容
                                triggerTime: new Date() //触发时间
                            }]
                        }
                    }
                })
            },
            // 添加协议
            addAgreement(type) {
                if (type === 'gambling') {
                    this.gambling.push(Object.assign({}, this.info));
                } else {
                    let addInfo = Object.assign({}, this.info);
                    addInfo.protocolType = 2
                    this.buyBack.push(Object.assign({}, addInfo));
                }
            },
            // 删除协议
            delAgreement(type, index) {
                let that = this
                this.$confirm('确定要删除此信息吗?', '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确定',
                    type: 'warning',
                    showClose: false,
                }).then(function () {
                    if (type === 'gambling') {
                        that.gambling.splice(index, 1);
                    } else {
                        that.buyBack.splice(index, 1);
                    }
                })
            },
        },
        components: {
            csBettingBuyBack: require('../betting-buy-back/edit'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-right {
    float: right;
}
.el-wid-15 {
    width: 15%;
}
.ca-inner {
    display:table-cell;
    vertical-align:middle;
}
.content_bx {
    display:flex;
    padding: 10px 0;
    align-items:center;
}
.content_bx span {
    width:75px;
    height:75px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#eff5fe;
    color: #1c8eef;
    text-align: center;
    margin-left: 60px;
}
.content_bx p{
    flex:1;
    line-height: 30px;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient:vertical;
    margin-left: 29px;
}
.wid-100{
    width: 85%;
}
.wid-100 div {
    margin-bottom: 3px;
}
</style>